<template>
  <div v-show="isShowFilter" class="filter">
    <x-header class="timeSelectHeader" :left-options="{showBack: false}">
      条件筛选
      <a slot="left" @click="onCancle">取消</a>
      <a slot="right" @click="confirm">完成</a>
    </x-header>
    <!-- 时间选择 -->
    <div v-show="isShowTimeSelect">
      <timeSelect @func="getTimeFromTimeSelect" :isShowTimeSelect.sync="isShowTimeSelect"></timeSelect>
    </div>
    <group class="screenWrap">
      <popup-radio title="汇报类型" placeholder="汇报" :options="typeOfReport" 
      v-model="reportType"></popup-radio>
      <popup-radio
        title="成员"
        :placeholder="placeholder_member"
        :options="groupMembers"
        v-model="member"
        @on-show="getGroupMembers"
      ></popup-radio>
      <popup-radio
        title="群/组"
        :placeholder="placeholderOfGroup"
        v-model="group"
        :options="allGroups"
      ></popup-radio>
      <cell title="时间" :value="timeContent" is-link @click.native="changeTime"></cell>
    </group>
  </div>
</template>

<script>
import { PopupRadio, XHeader, Cell, Group } from "vux";
import timeSelect from "views-new/common/report/partsOfUViewAll/timeSelect.vue";
import report_reminder from "api/report_reminder";
import group from "api/group";
import { compareReportType } from "utilMethods/sort.js";
export default {
  props: {
    isShowFilter: { type: Boolean },
    initParams: { type: Object },
  },
  components: {
    PopupRadio,
    timeSelect,
    XHeader,
    Cell,
    Group,
  },
  data() {
    return {
      typeOfReport: ["日报"], //汇报类型
      reportType: '',
      // 分组
      group: "",
      placeholderOfGroup: "",
      allGroups: [], // 存放所有分组
      // 成员
      placeholder_member: "成员",
      groupMembers: [], // 分组成员
      member: "",
      // 时间
      isShowTimeSelect: false,
      timeContent: "",
      startDate: "",
      endDate: "",
    };
  },
  watch: {
    initParams(val) {
      this.getInitParams();
    },
    group(val) {
      this.getReportType();
    },
    reportType(val){
      console.log('reportType变了');
      console.log(val);
      this.$emit("filter", {
        reportType: this.reportType,
        member: this.member,
        group: this.group,
        startDate: this.startDate,
        endDate: this.endDate,
      });
      
    }
  },
  mounted() {},
  methods: {
    getInitParams() {
      this.group = this.initParams.group;
      this.placeholderOfGroup = this.initParams.placeholderOfGroup;
      this.allGroups = this.initParams.allGroups;
      this.endDate = this.initParams.endDate;
      this.timeContent = this.endDate;

    },
    //根据选择群变化可操作的汇报类型列表，可在群设置中设置
    async getReportType() {
      this.typeOfReport = [];
      const result = await report_reminder.getAllSettingByGroupId(this.group);
      if (result.code === 1) {
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i].detail.enable) {
            this.typeOfReport.push(result.data[i].detail.type);
          }
        }
      }
      // 毕业总结默认每个群的人都可以填
      this.typeOfReport.push("毕业总结");
      this.typeOfReport.sort(compareReportType)
      this.reportType = this.typeOfReport[0]
    },
    // 获取组内成员
    async getGroupMembers() {
      this.groupMembers.length = 0;
      let tempMembers = [];
      let key, value;
      tempMembers = await group.getInfoOfMembers({ groupId: this.group });
      tempMembers.data.forEach((element) => {
        key = element.userId;
        value = element.detail.name;
        this.groupMembers.push({ key, value });
      });
    },
    changeTime() {
      console.log("changeTime");
      this.isShowTimeSelect = true;
    },
    getTimeFromTimeSelect(data) {
      if (data.type === "month") {
        this.timeContent = data.value;
        this.startDate = this.changeMonthToDate(data.value)[0];
        this.endDate = this.changeMonthToDate(data.value)[1];
      } else if (data.type === "day") {
        this.startDate = data.value.timeStart;
        this.endDate = data.value.timeEnd;
        if (data.value.timeStart === data.value.timeEnd) {
          this.timeContent = data.value.timeStart;
        } else {
          this.timeContent = data.value.timeStart + " 至 " + data.value.timeEnd;
        }
      }
    },
    changeMonthToDate(monthItem) {
      //monthItem:2020-03
      let year = monthItem.slice(0, 4);
      let month = monthItem.slice(5, 7);
      let firstDay = year + "-" + month + "-" + "01";
      let lastDay =
        year + "-" + month + "-" + new Date(year, month, 0).getDate();
      const arr = [firstDay, lastDay];
      return arr;
    },
    confirm() {
      this.$emit("update:isShowFilter", false);
      this.$emit("filter", {
        reportType: this.reportType,
        member: this.member,
        group: this.group,
        startDate: this.startDate,
        endDate: this.endDate,
      });
    },
    onCancle(){
      this.$emit("update:isShowFilter", false);
    }
  },
};
</script>


<style lang="less" scoped>
.filter {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  .screenWrap {
    width: 100%;
    // border: 1px solid red;
  }
}
</style>